<template>
  <div>
    <!-- 顶部返回 -->
    <nav-bar title="添加店铺代理人" is-arrow isBackUp />
    <div class="tip">
      本设置是用来添加店铺代理人，添加之后该代理人可以收到此店铺的订单（用户openId在我的-编辑资料）
    </div>
    <van-field
      v-model="form.openid"
      center
      clearable
      label="用户openId"
      placeholder="请输入用户openId"
    >
      <template #button>
        <van-button
          class="add_btn"
          size="small"
          type="primary"
          round
          @click="addAgency"
          >添加</van-button
        >
      </template>
    </van-field>
    <div class="express_list_warp">
      <div class="express">
        <div class="title">当前你所添加的店铺代理人</div>
        <template v-if="agencyList.length > 0">
          <div class="list" v-for="item in agencyList" :key="item.id">
            微信名：{{ item.nickname }}
            <div class="state">
              状态：{{ item.sState === 0 ? '暂停服务' : '服务中' }}
            </div>
            <van-button class="dele_btn" round @click="deleteAgency(item.id)"
              >删除</van-button
            >
          </div>
        </template>
        <van-empty v-else description="还没有店铺代理人哦~" />
      </div>
    </div>
  </div>
</template>
<script>
import { upData, getData } from '@/api/api.js'

import NavBar from '@/components/common/NavBar.vue'

export default {
  components: {
    NavBar,
  },
  data() {
    return {
      form: {
        openid: '',
        shopId: Number(window.sessionStorage.getItem('shopId')),
      },
      //   店铺代理人列表
      agencyList: [],
    }
  },
  created() {
    this.getAgencyList()
  },
  methods: {
    //  获取添加的代理人列表
    async getAgencyList() {
      const res = await upData(
        '/shop/service/find',
        { shopId: this.form.shopId },
        { showLoading: true }
      )
      console.log(res)
      if (res.code === '0') {
        this.agencyList = res.data.shopCustomerServerVos
        return false
      }
      this.$handleCode.handleCode(res)
    },
    // 添加代理人
    async addAgency() {
      if (!this.form.openid) {
        return this.$toast.fail('请填写代理人openId！')
      }
      const res = await upData('/shop/service/add', this.form, {
        showLoading: true,
      })
      console.log(res)
      if (res.code === '0') {
        this.form.openid = ''
        this.agencyList.push(res.data)
        return this.$toast.success('添加成功！')
      }
      this.$handleCode.handleCode(res)
    },
    // 删除代理人
    async deleteAgency(id) {
      const res = await upData(
        '/shop/service/delete',
        { id: id, shopId: this.form.shopId },
        {
          showLoading: true,
        }
      )
      console.log(res)
      if (res.code === '0') {
        this.$toast.success('删除成功！')
        this.agencyList = []
        return this.getAgencyList()
      }
      this.$handleCode.handleCode(res)
    },
  },
}
</script>
<style lang="less" scoped>
.tip {
  text-align: center;
  margin: 1rem 0;
  line-height: 1.5rem;
  color: #999;
  font-size: 0.8rem;
  span {
    color: cadetblue;
  }
}
.add_btn {
  height: 1.8rem;
  width: 3.5rem;
  font-size: 0.8rem;
  color: #997a00;
  background-color: #ffe788;
  border: 1px solid #ffe788;
}
.express_list_warp {
  margin-top: 1rem;
  padding-top: 1rem;
  box-sizing: border-box;
  background-color: #fff;
  .express {
    .title {
      font-weight: 900;
      text-align: center;
    }
    .list {
      color: #999;
      height: 2.8rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0.5rem;
      .state {
        font-size: 0.9rem;
      }
      .dele_btn {
        height: 1.8rem;
        font-size: 0.8rem;
      }
    }
    .list:nth-child(odd) {
      background-color: #fdf5e6;
    }
  }
}
</style>